<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.box {
				width: 600px;
				height: 400px;
				border: 5px solid gold;
				/* 解决换行被解析问题 */
				font-size: 0;
			}

			.box>div {
				/*
					盒模型在IE下会出现怪异盒模型现象
					box-sizing: border-box; 尺寸包含 boder, padding 和content
					content-box: 尺寸包含content;

				*/
				box-sizing: border-box;
				display: inline-block;
				width: 120px;
				height: 120px;
				padding: 20px;
				border: 20px solid black;
			}

			.red {
				background-color: red;
			}

			.orange {
				 background-color: orange;
			}

			.yellow {
				background-color: yellow;
			}

			.green {
				background-color: green;
			}

			.blue {
				background-color: blue;
			}


		</style>
	</head>
	<body>

		<div class="box">
			<div class="red"></div>
			<div class="orange"></div>
			<div class="yellow"></div>
			<div class="green"></div>
			<div class="blue"></div>
		</div>
		
	</body>
</html>